<template>
  <basic-dialog
    :visible="visible"
    :title="'提示'"
    :show-footer="false"
    :show-close="false"
    :handle-close="handleClose"
    :width="'30%'"
  >
    <div>
      <div style="text-align: center">
        <div class="el-row">
          <i class="el-icon-success" style="color:green;font-size: 40px"></i>
        </div>
        <div class="el-row" style="line-height: 50px">
          <h4>生成采购订单成功</h4>
        </div>
        <div class="el-row" v-for="(item, index) in purchaseOrderNoList" :key="index">
          订单号：{{item}} <a :data-clipboard-text="item" class="iconfont icon-copy">复制</a>
        </div>
      </div>
      <el-row style="margin: 20px 0" type="flex" justify="center">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </el-row>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@sourcing/components/BasicDialog';
import Clipboard from 'clipboard';

export default {
  // 下推采购单成功弹窗
  name: 'SuccessDialog',
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
    },
    purchaseOrderNo: {
      type: String
    },
    purchaseType: {
      type: String
    },
  },
  data () {
    return {};
  },
  computed: {
    purchaseOrderNoList () {
      if (!this.purchaseOrderNo) {
        return []
      }
      return this.purchaseOrderNo.split(',')
    }
  },
  mounted () {
    const clipboard = new Clipboard('.icon-copy');
    clipboard.on('success', e => {
      this.$message.success('已复制到剪贴板！');
    });
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false);
      if (this.purchaseType == 'self') {
        this.$router.push({ name: 'selfPurchase', query: { sts: '300' } });
      } else {
        this.$router.push({ name: 'order', query: { sts: '300' } });
      }
    },
  },
};
</script>
